<template>
  <div class="app-category">
    <AppHeader class="app-common__header" back>
      <template #title>
      <van-search
        shape="round"
        background="#b83627"
        placeholder="搜索商品名称"
        @click="handleToSearsh"
      />
    </template>
    </AppHeader>
    <div class="app-cate__brand">
      <div class="app-cate__brand-item">
    <van-tree-select
        v-model:main-active-index="activeIndex"
        height="55vw"
        :items="items"
        @click-nav="handleChangeBrand"
      >
        <template #content>
           <RouterLink
            custom
            v-slot="{navigate}"
            v-for="cate in brandList"
            :key="cate.proid"
            :to="{name:'detail',params:{proid:cate.proid}}"
           >
           <div class="item-cate">
            <van-space>
            <h2 class="brand">{{cate.brand}}</h2>
           </van-space>
           <!-- <p class="brand">{{cate.brand}}</p> -->
            <van-image
            @click="navigate"
            :src="cate.img1"
          />
          <p class="price">
            <p class="proname van-multi-ellipsis--l2">{{ cate.proname }}</p>
            <span>{{ cate.originprice * cate.discount / 10 }}</span>
            <span>{{ cate.originprice }} / <van-tag color="#7232dd" plain>{{ cate.discount }} 折</van-tag></span>
          </p>
           </div>
           </RouterLink>
        </template>
      </van-tree-select>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useRouter,useRoute} from 'vue-router'
import AppHeader from "../AppLayout/AppHeader/index.vue";
// import {getBrandListApi} from '@/api/pro'
import {getBrandListApi} from '@/api/pro'
import {getCateGoryListApi} from '@/api/pro'
import {ref,onMounted} from 'vue'
import type {ICateParams} from '@/api/pro'
import type {IProItem} from '@/@types/pro'
const cateList=ref<any[]>([])
const active = ref<number>(0);
const brandList=ref<IProItem[]>([])
// const keyword=ref<string>('')
let keyword:string=''
const router=useRouter()
const route=useRoute()
const activeIndex = ref(0)
const items=ref<any[]>([])
const handleToSearsh=()=>{
  router.push({name:'searsh',query:{keyword:route.query.keyword}})
}
const getCateGoryList=async ()=>{
  const cateData=await getCateGoryListApi()
  cateList.value=(cateData as unknown) as string[]
  cateList.value.forEach((item,index)=>{
    items.value.push({text:item})
  })
}
const getBrandList=async(params:ICateParams)=>{
  const list=await getBrandListApi(params)
  brandList.value=(list as unknown)  as IProItem[]
}
const DefaultInfo=ref<ICateParams>({
  count:1,
  limitNum:20,
  keyword:'手机'
})
const handleChangeBrand= async (index:number)=>{
  // keyword=items.value[index].text
  keyword=items.value[index]?.text
  DefaultInfo.value.keyword=keyword
  try {
    await getBrandList(DefaultInfo.value)
  } catch (error) {
    
  }
}
onMounted(() => {
   getCateGoryList()
   handleChangeBrand(active.value)
})
</script>
<style lang="scss">
.app-cate__brand{
  height: 100%;
  display: flex;
  &-item{
    height: 100%;
  }
  .van-tree-select{
    height: 100%!important;
  }
  .van-tree-select__content{
    .item-cate{
      margin-bottom: 15px;
    }
    text-align: center;
    padding: 10px;
    height: 100%!important;
    .van-image{
      width: 100%;
    }
    .van-space{
      .van-space-item{
      justify-content: center!important;
      .brand{
        width: 100%;
        text-align: center;
      }
    }
    }
  }
  .van-list{
    margin-left: 20px;
    width: 200px;
    flex-grow: 0;
    flex-shrink: 0;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .common-list__item{
      margin-bottom: 20px;
    }
}
</style>